<template>
	<div class="user_bar_outer">
		<strong></strong>
		<span class='user_bar_name' @click='showCard'>
			我的    <Icon type="chevron-down"></Icon>
		</span>
        <div class="user_bar1_card" v-if='cardShow'>
            
            <div v-link="{path:'/password'}" class="user_bar_card_footer">
                    <a><Icon type="edit"></Icon></a>
                    <a>修改密码</a>
            </div>
            <div @click='confirm' class="user_bar_card_footer">
                <a><Icon type="power"></Icon></a>
                <a>注销登录</a>
            </div>

        </div>
	</div>
</template>
<script>
    export default {
        data () {
            return {
                pic:this.publicPath+'/src/images/con_pic.png',
                cardShow:false,
            };
        },
        methods:{
            showCard(){
                this.cardShow=!this.cardShow;
            },
            confirm(){
                let that=this;
                this.$Modal.confirm({
                    title: '退出',
                    content: '<p>您确认退出吗?</p>',
                    onOk: () => {
                        that.logout();
                    },
                    onCancel: () => {
                        
                    }
                });
            },
            logout(){
                this.$http.jsonp(this.path+'loginServlet/logoff',{
                                jsonp:'callback'
                            }).then((datas)=>{
                                if(datas.body.code=='001'){    
                                    this.store.state.user.companyId=null;
                                    this.store.state.user.companyName=null;
                                    this.store.state.allInfor=null;
                                    this.myRouter.go({path:'/login'});
                                    this.$Message.success('退出成功!');
                                }else if(datas.body.code=='997'){
                                    this.$Message.error('未登陆!');
                                    this.myRouter.go({path:'/login'});
                                }
                            },(error)=>{
                                this.$Message.error('提交失败!');
                            });

            }

        }
    }
</script>
<style>
    .fr{
      float:right;
    }
    .fl{
      float:left;
    }
	.user_bar_outer{
        line-height:60px;
        height: 60px;
        background:#333745;
        width:100%;
        box-sizing: border-box;
        padding-left: 20px;
        box-shadow: 0px 2px 2px 2px #dee1e4;
        position: relative;
    }
    .user_bar_outer strong{
        font-size: 18px;
        color: #ffffff;
        line-height: 60px;
        font-weight: normal;
    }
    .user_bar_outer span.user_bar_name{
        line-height: 60px;
        float: right;
        text-align: center;
        background:#2d3039;
        width:112px;
        font-size: 14px;
        color:#fff;
        cursor:pointer;
    }
    .user_bar1_card{
        position: absolute;
        right: 10px;
        top:65px;
        width: 200px;
        height: 120px;
        box-shadow: 0px 0px 2px 2px #ccc;
        border-radius: 2px;
        padding:10px;
        background: #fff;
        z-index: 999;
    }
    .user_bar1_card .user_bar_card_header{
        overflow: hidden;
    }
    .user_bar1_card_header img{
        width: 50px;
        height: 50px;
        border-radius: 25px;
        float: left;
    }
    .user_bar1_card .user_bar_card_header .user_bar_card_infor{
        width: 150px;
        float: right;
        padding-left: 14px;
        line-height: 25px;
    }
    .user_bar1_card .user_bar_card_block_content{
        margin:10px 0px;
        border:#f0f0f0 solid;
        border-width: 1px 0px 1px 0px;
        overflow: hidden;
    }
    .user_bar1_card .user_bar_card_block_content div{
        width: 49%;
        text-align: center;
        line-height: 26px;
        border-left: #f0f0f0 1px solid;
        margin-top: 8px;
        cursor: pointer;
    }
    .user_bar1_card .user_bar_card_block_content div:first-child{
        border-left:none;
    }
    .user_bar1_card .user_bar_card_block_content div a{
        font-size:14px;
        color:#4c5c6e;
        font-style: normal;
    }
    .user_bar1_card .user_bar_card_block_content div a:first-child{
        font-size: 18px;
    }
    .user_bar1_card .user_bar_card_footer{
        text-align: center;
        position: relative;
        top:-8px;
        cursor: pointer;
    }
    .user_bar1_card .user_bar_card_footer a{
        font-style: normal;
        font-size:12px;
        color:#4c5c6e;
        line-height:25px;
    }
    .user_bar1_card .user_bar_card_footer a:first-child{
        font-size: 14px;
    }
</style>